import React from 'react';
import { Header } from 'react-native-elements';
import { Image, Text, TouchableOpacity, View, ImageBackground } from 'react-native';
import Colors from "../constants/Colors";
import { unitWidth, width, statusBarHeight, titleHeight } from "../constants/AdapterUtil";

export class LeftComponent extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity style={{ width: 40 * unitWidth, height: 40 * unitWidth, justifyContent: 'center' }} onPress={this.props.leftClick}>
                <View style={{ alignSelf: 'stretch', justifyContent: 'center', marginLeft: 15 * unitWidth }}>
                    <Image source={this.props.leftImg}
                        style={{ width: 20 * unitWidth, height: 20 * unitWidth }}
                        resizeMode='stretch' />
                </View>
            </TouchableOpacity>
        );
    }
}

export class CenterComponent extends React.Component {
    render() {
        return (
            <Text style={[{ fontSize: 16 * unitWidth, color: this.props.fontColor }, this.props.centerStyle]}>{this.props.title}</Text>
        );
    }
}

export class RightComponent extends React.Component {
    render() {
        return (
            <TouchableOpacity style={{ marginRight: 15 * unitWidth }} onPress={this.props.rightClick}>
                <View style={{ alignSelf: 'stretch', justifyContent: 'center' }}>
                    <Image source={this.props.rightImg} style={{ width: 20 * unitWidth, height: 20 * unitWidth }}
                        resizeMode='stretch' />
                </View>
            </TouchableOpacity>
        );
    }
}

export class RightTextComponent extends React.Component {
    render() {
        return (
            <TouchableOpacity style={{ alignItems: 'flex-end' }} onPress={this.props.rightClick}>
                <Text style={{ marginRight: 10, color: Colors.black, fontSize: 13 * unitWidth, }}>{this.props.righttext}</Text>
            </TouchableOpacity>
        );
    }
}


export class MyHeader extends React.Component {
    render() {
        return (
            <View style={{ height: statusBarHeight + titleHeight, width: width, backgroundColor: Colors.white }}>
                <View style={{ marginTop: statusBarHeight, height: titleHeight, width: width, backgroundColor: Colors.white, flexDirection: 'row', borderWidth: 0.5, borderBottomColor: Colors.colorE8, borderColor: Colors.transparent }}>
                    <View style={{ flex: 1, justifyContent: 'center' }}>
                        <LeftComponent leftClick={this.props.leftClick} leftImg={this.props.leftImg} />
                    </View>
                    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                        <CenterComponent title={this.props.title} fontColor={Colors.black} />
                    </View>
                    <View style={{ flex: 1, justifyContent: 'center' }}>
                        <RightTextComponent rightClick={this.props.rightClick} righttext={this.props.righttext} />
                    </View>
                </View>
            </View>
        );
    }
}

export class MyRightImageHeader extends React.Component {
    render() {
        return (
            <View style={{ height: statusBarHeight + titleHeight, width: width, backgroundColor: Colors.white }}>
                <View style={{ marginTop: statusBarHeight, height: titleHeight, width: width, backgroundColor: Colors.white, flexDirection: 'row', borderWidth: 0.5, borderBottomColor: Colors.colorE8, borderColor: Colors.transparent }}>
                    <View style={{ flex: 1, justifyContent: 'center' }}>
                        <LeftComponent leftClick={this.props.leftClick} leftImg={this.props.leftImg} />
                    </View>
                    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                        <CenterComponent title={this.props.title} fontColor={Colors.black} />
                    </View>
                    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-end' }}>
                        <RightComponent rightClick={this.props.rightClick} rightImg={this.props.rightImg} />
                    </View>
                </View>
            </View>
        );
    }
}

